<template>
  <div id="centreLeft2">
    <div class="bg-color-black ">
        <div class="titles">
          <span>今日事件统计</span>
        </div>
        <div class="d-flex jc-center ai-center bodyHeight" >
          <div class="flex-1 ">
            <div class="d-flex flex-column  jc-center ai-center yw_left1">
               <el-progress type="dashboard" :percentage="processData[0].value" :color="processData[0].color" :show-text="true" :stroke-width="10" :width="100" :format="format"></el-progress>
              <div class="protext">
                已处理
              </div>
            </div>
          </div>
          <div class="flex-1">
            <div class="d-flex flex-column  jc-center ai-center yw_left2">
               <el-progress type="dashboard" :percentage="processData[1].value" :color="processData[1].color" :show-text="true" :stroke-width="10" :width="100" :format="format"></el-progress>
                <div class="protext" style="color:#FFE400;">
                  处理中
                </div>
            </div>
          </div>
          <div class="flex-1">
            <div class="d-flex flex-column  jc-center ai-center yw_left3">
                <el-progress type="dashboard" :percentage="processData[2].value" :color="processData[2].color" :show-text="true" :stroke-width="10" :width="100" :format="format"></el-progress>
                <div class="protext" style="color:#F64646;">
                  未处理
                </div>
            </div>
           
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'; // 引入mapState
export default {
  data() {
    return {
      processData: [
        {
          name: "已完成",
          value: 0,
          color: "#11FFD7"
        },
        {
          name: "处理中",
          value: 0,
          color: "#FFE400"
        },
        {
          name: "未完成",
          value: 0,
          color: "#F64646"
        }
      ],
      
    };
  },
  components: { 
   
  },
  computed: {
    ...mapState({
      cityId: state => state.system.cityId, // 从Vuex Store中获取cityId
    }),
  },
  mounted() {
    this.getProcessData();
    this.$watch('cityId', (newVal, oldVal) => { // 监听cityId的变化
      if (newVal !== oldVal) {
        this.getProcessData(); // 当cityId变化时重新请求数据
      }
    });
  },
  methods: {
    format(percentage) {
      if(percentage == 0) return '0';
      else return percentage;
    },
    getProcessData() {
      this.$api.healthData({
        region_id: this.cityId, 
      }).then(res => {
          if(res.code == 0) {
              // console.log('89898',res.data)
              this.processData[0].value = res.data.processed;
              this.processData[1].value = res.data.processing;
              this.processData[2].value = res.data.unProcess;

          }
      })
    }
  }
};
</script>

<style lang="scss">
#centreLeft2 {
  height: 2.4875rem;
  width: 5.45rem;
  box-sizing: border-box;
  // border: 1px solid red;
  margin-bottom: 0.125rem;

  .bodyHeight {
    height: 2.1625rem;
  }

  .dataItem {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .dataimg {
      width: 1.42rem;
      height: 1.42rem;
    }
  }
  .protext {
    background: url('../assets/process_bg.png') no-repeat center center;
    background-size: cover;
    width: 1.61rem;
    height: 0.4rem;
    font-size: 0.175rem;
    font-weight: bold;
    color: #11FFD7;
    text-align: center;
    margin-top: -0.1rem;
  }
  
}

.yw_left1 .el-progress__text {
	  color: #11FFD7 !important; 
    font-size: 28px !important;
    font-weight: bold;
}
.yw_left2 .el-progress__text {
	  color: #FFE400 !important; 
    font-size: 28px !important;
    font-weight: bold;
}
.yw_left3 .el-progress__text {
	  color: #F64646 !important; 
    font-size: 28px !important;
    font-weight: bold;
}
</style>